<template>


  <div class="rateContainer">

         <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    运营管理
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>BTM参数配置</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
   </div>


  <el-tabs type="border-card">
<!--   <el-tab-pane label="交易倒计时" class="card-container">
    <el-input placeholder="请输入最长等待时间"  class="ratio-input" v-model = "parsms_num.number">
      <template slot="append">秒</template>
    </el-input>
   <div><el-button type="default" style="margin:20px 0;" @click="save">保存</el-button></div>
  </el-tab-pane> -->
  <el-tab-pane label="报警金额设置" class="card-container">



<el-card class="box-card country-rate" v-for="(item,index) in btmSet" :key='index'>
  <div slot="header" class="clearfix">
    <span>{{item.countryName}}</span>
    <el-button style="float: right; padding: 3px 0" type="text" @click="edit(index)">编辑</el-button>
  </div>
  <div>
存款箱报警限额：{{item.depositBox}}
  </div>
    <div>
 取款箱报警限额：{{item.withdrawBox}}
  </div>
</el-card>


<div style="clear:both;text-align:left;">
<el-card class="box-card">
        <el-form ref="form"   label-width="150px" >
            
                <el-form-item label="投放国家" prop="a_type_id" >
                    <el-select  placeholder="请选择国家"  @focus="getCountry" @change="setCityName" style="width:300px;" v-model ='data_data.country'>
                        <!-- <el-option label="美国" value="0"></el-option> -->
                        <el-option v-for='(item,index) in country' :key="index" :label="item.chineseName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
             
                <el-form-item label="存款箱报警张数" prop="a_title">
                    <el-input placeholder="请输入报警张数" type="number"   style="width:300px;" v-model ='data_data.depositBox'></el-input>
                </el-form-item>

                <!-- TODO 此处有争议 -->
                <el-form-item label="取款箱报警张数" prop="a_title">
                    <el-input placeholder="请输入报警张数"  type="number"  style="width:300px;" v-model ='data_data.withdrawBox'></el-input>
                </el-form-item>
                <!--  -->
                <el-form-item label="最长等待时间" prop="a_title">
                  <el-input placeholder="请输入最长等待时间" style="width:300px;" class="ratio-input" v-model = "params_params.tradingCountdown">
                    <template slot="append">秒</template>
                  </el-input>
                </el-form-item>
                
                 <el-form-item style="margin-top:30px;">
                    <el-button type="primary" @click="onSubmit('form')">提交</el-button>
                </el-form-item>
            </el-form>
</el-card>
</div>
  </el-tab-pane>

</el-tabs>

  </div>
</template>


<style scoped>
.ratio-input{
    width:400px;
}
.card-container{
    padding-top:20px;
}
.country-rate{
    width:300px;
    float: left;
    margin:10px;
}
</style>

<script>
import {api,apiGet,apiPut,apiDelete} from '@/api/index';
import loading from "@/components/common/loading.vue";
export default {
  data() {
    return {
      country:[],
      activeName: "second",
      select:"",
      btmSet:[],
      parsms_num:{
        number:''
      },
      params:{
          page:0,
          size:8,
      },
      params_params:{
        country:'',
        tradingCountdown:'',
        maxAmount:"",
        btmAlarmLimits:[],
      },
      data_data:{
        country:'',
        countryName:'',
        depositBox:'',
        withdrawBox:'',
      },
      
    }
  },
  methods: {
    edit(i){
      this.getCountry().then(res=>{
        this.data_data=this.btmSet[i];
        this.setCityName();
      })
      
    },
    setCityName(){
      // //console.log(this.data_data)
      this.country.map(item=>{
        if(this.data_data.country==item.id){
          this.data_data.countryName=item.chineseName;
        }
      })
    },
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    getList(){
        this.tip='获取btm设置列表'
        this.loading=true;
        apiGet.settingBtn.settingBtnList(this.params).then(res=>{
            //console.log(res);
            this.loading=false;
            this.btmSet=res.btmAlarmLimits;
        })
    },
    getCountry(page=0){
      return new Promise((resolve,reject)=>{
      var params={
        page:page,
        size:10,
      }
      apiGet.country.getCountry(params).then(res=>{
        // //console.log(res)
        resolve(res);
        this.country=res.content;
        // for(var i=0;i<4;i++){
        //   this.country.push(res.content)
        // }
      })
      })
    },
    onSubmit(){
      this.loading=true;
      let a = this.params_params.btmAlarmLimits.push(this.data_data);
      // if(!this.params_params.tradingCountdown){return this.$message.warning('最长等待时间')}
      if(!this.data_data.country){return this.$message.warning('请选择城市')};
      if(!this.data_data.depositBox){return this.$message.warning('请输入存款箱张数')};
      if(!this.data_data.withdrawBox){return this.$message.warning('请输入取款箱张数')};
      //console.log(a,'aaa')
      api.settingBtn.settingBtnList(this.params_params).then(res=>{
            this.loading=false;
            //console.log(res);
            // this.loading=false;
            this.$message({message:'操作成功',type:'success'})
            this.getList();
            this.data_data={
              country:'',
              countryName:'',
              depositBox:'',
              withdrawBox:'',
            };
            this.params_params.tradingCountdown=''
        })
    },
  },

    mounted () {
        this.getList();
    }
};
</script>

